﻿@model dynamic

@{
    ViewBag.Title = "Entretiens";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <!-- Calendar -->
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Calendar/calendar.css")" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Calendar/calendar_transparent.css")" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/Calendar/daypilot-all.min.js")"></script>

</head>
<body>
  
    <div class="shadow"></div>
    <div class="hideSkipLink">
    </div>
    <div class="main">

     
        <div style="float:left; width: 160px;">
            <div id="nav"></div>
        </div>
        <div style="margin-left: 160px;">
            <div id="dp"></div>
        </div>

        <script type="text/javascript">

            var nav = new DayPilot.Navigator("nav");
            nav.showMonths = 3;
            nav.skipMonths = 3;
            nav.selectMode = "week";
            nav.onTimeRangeSelected = function (args) {
                dp.startDate = args.day;
                dp.update();
                loadEvents();
            };
            nav.init();

            var dp = new DayPilot.Calendar("dp");
            dp.viewType = "Week";
            //Déplacement d'une évennement
            dp.onEventMoved = function (args) {
                $.post("Entretiens/move",
                        {
                            id: args.e.id(),
                            newStart: args.newStart.toString(),
                            newEnd: args.newEnd.toString()
                        },
                        function () {
                            console.log("Moved.");
                        });
            };

            dp.onEventResized = function (args) {
                $.post("Entretiens/resize",
                        {
                            id: args.e.id(),
                            newStart: args.newStart.toString(),
                            newEnd: args.newEnd.toString()
                        },
                        function () {
                            console.log("Resized.");
                        });
            };

            // event creating
            dp.onTimeRangeSelected = function (args) {
                var name = prompt("New event name:", "Event");
                dp.clearSelection();
                if (!name) return;
                var e = new DayPilot.Event({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: name
                });
                dp.events.add(e);

                $.post("Entretiens/create",
                        {
                            start: args.start.toString(),
                            end: args.end.toString(),
                            name: name
                        },
                        function () {
                            console.log("Created.");
                        });

            };

            dp.onEventClick = function (args) {
                alert("clicked: " + args.e.id());
            };

            dp.init();

            loadEvents();

            function loadEvents() {
                var start = dp.visibleStart();
                var end = dp.visibleEnd();

                $.post("Entretiens/events",
                {
                    start: start.toString(),
                    end: end.toString()
                },
                function (data) {
                    //console.log(data);
                    dp.events.list = data;
                    dp.update();
                });
            }

        </script>


    </div>
    <div class="clear">
    </div>
</body>
</html>


